<template>
  <div class="login-container">
    <div id="logo">后台管理系统</div>
    <div id="login">
      <el-card class="box-card">
        <div id="from">
          <el-input v-model="queryParams.mobOrEmail" placeholder="请输入账号"></el-input>
          <el-input placeholder="请输入密码" v-model="queryParams.password" show-password></el-input>
          <el-button type="primary" @click="login" class="log" >登录</el-button>
          <!-- <el-button type="primary"  @click="login" >登录</el-button> -->
        </div>
      </el-card>
    </div>
    <div id="clock">
      <div id="time">{{time}}</div>
      <div id="date">{{date}}</div>
    </div>
    <div id="copyright">Copyright @ 2022 hglmtd.All Rights Reserved.</div>

  </div>
</template>

<script>
import LeftNavMenu from '@/components/leftNavMenu'
import {handlerLogin} from "@/api/login";

export default {
  name: 'MyLogin',
  comments: {
    LeftNavMenu
  },
  data() {
    return {
      queryParams: {
        mobOrEmail: '',
        password: ''
      },
      username:'',
      password:'',
      time:'',
      date:''
    }
  },
  methods: {
    update_clock(){
    var d = new Date()
    var year = d.getYear()
    var a = d.toLocaleString()
    console.log(a)
    if (year<10) {
      year = "0" +year
    }
    var mon = d.getMonth();//.toString().toStatr()
    if (mon<10) {
      mon = "0" +mon
    }
    var day = d.getDay()
    if (day<10) {
      day = "0" + day
    }
    var hour = d.getHours();
    if (hour<10) {
      hour = "0" +hour
    }
    var minute = d.getMinutes();
    if (minute<10) {
      minute = "0" +minute
    }
    var b = d.toLocaleDateString()
    this.time = hour+":"+minute
    this.date = b
    console.log(b)
    console.log(this.date)
  },
    reset(){
      this.queryParams.mobOrEmail = '',
          this.queryParams.password = ''
    },
    login(){

      handlerLogin(this.queryParams).then(res => {
        console.log(res.data.data)
        if(res.data.code == 200 && parseInt(res.data.data.admin) == 1){
          // this.$cookies.set('admin',res.data.data.token)
          window.sessionStorage.setItem('token', res.data.data.token)
          this.$notify({
            title: '登陆成功',

          });
          this.$router.push('/IndexHome')
        } else {
          alert("您还不是管理员")
        }
      })

      // if (this.username === 'admin' && this.password === '1234') {
      //   // 登陆成功
      //   // 1.存储token
      //   localStorage.setItem('token','xxx')
      //   // 2.跳转到后台主页
      //   this.$router.push('/IndexHome')
      // }else{
      //   //登陆失败
      //   localStorage.removeItem('token')
      // }
    }
  },
  mounted() {
  this.$nextTick(()=>{
    setInterval(
      this.update_clock
    ,1000)
  })
},
}
</script>

<style scoped>
.login-container {
  display: flex;
  position: fixed;
  width: 100%;
  background-color: #35495e;
  height: 100%;
  top: 0;
  left: 0;
  background-size: 400%;
}
#logo{
  color: aliceblue;
  /* color: #dcdcdc; */
  font-size: 61px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  top: 8%;
  left: 38%;

}
#login{
  position: absolute;
  top: 30%;
  left: 38%;
}
.el-card {
  width: 373px;
  height: 210px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 15px;
}
#from{
line-height: 60px;
padding-left: 15px;
padding-right: 15px;
}
#clock{
color: aliceblue;
position: absolute;
top: 70%;
left: 15%;
text-align: left;
}
#time{
font-size: 100px;
}
#date{
font-size: 35px;
}
#copyright{
color: aliceblue;
position: absolute;
top: 95%;
left: 38%;
}
.log{
  position: relative;
  left: 110px;
}

</style>
